<template>
  <div class="app-container">
    <div class="cont1">
      <div class="row_flextit">
        <div class="block"></div>
        <div class="titwenzi">普通设置</div>
      </div>
      <el-form>
        <el-form-item label="轮播图间隔时长" label-width="200px">
          <el-input placeholder style="width:90%">
            <template slot="append">秒</template>
          </el-input>
        </el-form-item>
        <el-form-item label="客户入店时间" label-width="200px">
          <el-input placeholder style="width:90%">
            <template slot="prepend">订单开始前</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="座位上电时间" label-width="200px">
          <el-input placeholder style="width:90%">
            <template slot="prepend">订单开始前</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="座位断电时间" label-width="200px">
          <el-input placeholder style="width:90%">
            <template slot="prepend">订单结束后</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="包间订单取消截止时间" label-width="200px">
          <el-input placeholder style="width:90%">
            <template slot="prepend">订单开始前</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="cont1">
      <div class="row_flextit">
        <div class="block"></div>
        <div class="titwenzi">预约规则设置</div>
      </div>
      <el-form>
        <el-form-item label="免费取消" label-width="200px">
          <el-input placeholder style="width:90%">
            <template slot="prepend">订单开始前</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <div style="display:flex;align-items:center;width:91%">
          <div
            style="color:#6D6D6D;font-size:14px;white-space: nowrap;margin-right:8px;width:200px;text-align:right;margin-left:24px"
          >超过免费时长后，取消规则配置</div>
          <el-divider></el-divider>
        </div>
        <el-form-item label="结算方式" label-width="200px">
          <el-select v-model="value" style="width:90%" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div style="display:flex;align-items:center;width:91%">
          <div
            style="color:#6D6D6D;font-size:14px;white-space: nowrap;margin-right:8px;width:200px;text-align:right;margin-left:24px"
          >未签到规则配置</div>
          <el-divider></el-divider>
        </div>
        <el-form-item label="允许迟到时间" label-width="200px">
          <el-input placeholder style="width:90%">
            <template slot="prepend">订单结束后</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="未签到时" label-width="200px">
          <el-radio v-model="radio" label="1">不取消订单</el-radio>
          <el-radio v-model="radio" label="2">取消订单</el-radio>
        </el-form-item>
        <div style="display:flex;align-items:center;width:91%">
          <div
            style="color:#6D6D6D;font-size:14px;white-space: nowrap;margin-right:8px;width:200px;text-align:right;margin-left:24px"
          >提前结束规则配置</div>
          <el-divider></el-divider>
        </div>
        <el-form-item label="可提前结束时间" label-width="200px">
          <el-input placeholder style="width:90%">
            <template slot="prepend">订单开始后</template>
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="结算方式" label-width="200px">
          <el-select v-model="value1" style="width:90%" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div
          style="color:#6D6D6D;font-size:14px;margin-bottom:28px;margin-left:102px;"
        >使用次卡预约的订单提前结束时是否需要返还次卡，默认是不返还。</div>
        <div style="display:flex;margin-left:110px;margin-bottom:36px;">
          <span style="color:#333333;font-size:14px;margin-right:14px;">返还次卡次数</span>
          <el-checkbox v-model="checked"></el-checkbox>
        </div>
      </el-form>
    </div>
    <div class="cont1">
      <div class="row_flextit">
        <div class="block"></div>
        <div class="titwenzi">储值/积分系统</div>
      </div>
      <div class="titswenzi">
        品牌若需要推行自己的储值/积分系统，可修改以下单位及比例信息。
        注意！修改只影响往后的用户储值计算，不会追溯及修改历史记录。请谨慎操作
      </div>
      <el-form>
        <el-form-item label="储值名称" label-width="200px">
          <el-input style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="储值单位" label-width="200px">
          <el-input style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="人民币换算比例" label-width="200px">
          <el-input style="width:90%">
            <template slot="prepend">1：</template>
          </el-input>
        </el-form-item>
        <div class="titswenzi">启用自由储值后，会员可自定义充值积分。</div>
        <div style="display:flex;margin-left:110px;margin-bottom:26px;">
          <span style="color:#333333;font-size:14px;margin-right:14px;">启用自由储值</span>
          <el-checkbox v-model="checked"></el-checkbox>
        </div>
        <el-form-item label="最少储值" label-width="200px">
          <el-input style="width:90%"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="cont1">
      <div class="row_flextit">
        <div class="block"></div>
        <div class="titwenzi">分享图片</div>
      </div>
      <div class="titswenzi">
        上传即修改，尺寸宽500*高400
      </div>
      <div style="display:flex;margin-left:36px;margin-bottom:38px">
          <div style="margin-right:26px">
              <div style="display:flex;align-items:center;margin-bottom:12px;margin-left:10px">
                  <span class="dian"></span>
                  <span>分享图片</span>
              </div>
              <div class="imgcont">
                  <img src="../../assets/404_images/404.png" style="width: 202px;height: 162px;border-radius: 2px;" alt="">
              </div>
          </div>
          <div>
              <div style="display:flex;align-items:center;margin-bottom:12px;margin-left:10px">
                  <span class="dian"></span>
                  <span>分享图片</span>
              </div>
              <div class="imgcont">
                  <div class="contwenzibox">
                      <div style="color:#333;font-size:14px;margin:10px auto;width:88%">一起学习吧-牡蛎自习室24小时自动自习室</div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <div style="text-align:right;width:99%;margin-bottom:40px">
    <el-button type="primary">保存设置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
      options: [
        {
          value: "选项1",
          label: "按时间折算扣费"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: "选项1",
      options1: [
        {
          value: "选项1",
          label: "按时间折算扣费"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value1: "选项1"
    };
  },
  methods: {}
};
</script>

<style scoped>
.cont1 {
  width: 98%;
  height: auto;
  margin: 10px auto 30px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(55, 55, 55, 0.1);
  overflow: hidden;
}
.row_flextit {
  margin-left: 26px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}
.block {
  width: 10px;
  height: 16px;
  background: #409eff;
  margin-right: 20px;
}
.titwenzi {
  color: #333;
  font-size: 14px;
}
.titswenzi {
  color: #6d6d6d;
  font-size: 14px;
  margin-left: 56px;
  margin-bottom: 26px;
}
.imgcont{
    width: 280px;
height: 218px;
background: #F5F5F5;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.dian{
    width: 6px;
height: 6px;
background: #409EFF;
border-radius: 50%;
margin-right: 4px;
}
.contwenzibox{
    width: 262px;
height: auto;
background: #FFFFFF;
border: 1px solid #EEEFF1;
border-radius: 2px;
}
</style>

